<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS表格 彻底研究</title>
<style type="text/css">
table.tbl, table.tbl th, table.tbl td {
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
}
table.tbl {
	border-collapse: collapse;
	border-spacing: 1px;
}
table.tbl th, table.tbl td {
	padding: 0.2em; }
table.tbl th {
	font-weight: bold;
	background-color: #e5e5e5;
}
table.tbl thead {
	border-top: 10px solid #333;
	border-bottom: 10px solid #333;
}
table.tbl tbody {
	border-top: 10px solid #333;
	border-bottom: 10px solid #666;
}
table.tbl tfoot {
	border-top: 10px solid #333;
	border-bottom: 10px solid #999;
}
table.tbl thead tr {
	border-bottom: 3px solid #000;
}
table.tbl tbody tr {
	border-bottom: 3px solid #000;
}
table.tbl tfoot tr {
	border-bottom: 3px solid #000;
}
/* ######### ######### ######### “川”字形表格 ######### ######### ######### */
table.chuan, table.chuan th, table.chuan td {
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
}
table.chuan {
	border-collapse: collapse;
	border-spacing: 0;
}
table.chuan th, table.chuan td {
	padding: 0.2em;
}
table.chuan th {
	font-weight: bold;
	background-color: #e5e5e5;
}
/* ######### ######### ######### “回”字形表格 ######### ######### ######### */
table.hui, table.hui th, table.hui td {
	border: 1px solid #000000;
}
table.hui {
	border-collapse: separate;
	border-spacing: 1px;
	border: 2px solid #006633;
}
table.hui th, table.hui td {
	padding: 0.2em;
}
table.hui th {
	font-weight: bold;
	background-color:  #009933;
	border: 1px solid #000;
}
table.hui td {
	border: 1px solid #444;
}
/* ######### ######### ######### “三”字形表格 ######### ######### ######### */
table.san, table.san th, table.san td {
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
}
table.san {
	border-collapse: collapse;
	border-spacing: 0;
}
table.san th, table.san td {
	padding: 0.2em;
}
table.san th {
	font-weight: bold;
	background-color: #e5e5e5;
}
/* ######### ######### ######### “田”字形表格 ######### ######### ######### */
table.tian, table.tian th, table.tian td {
	border: 1px solid #000000;
}
table.tian {
	border-collapse: collapse;
	border-spacing: 0;
}
table.tian th, table.tian td {
	padding: 0.2em;
}
table.tian th {
	font-weight: bold;
	background-color: #e5e5e5;
}
/* ######### ######### ######### “王”字形表格 ######### ######### ######### */
table.wang, table.wang th, table.wang td {
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
}
table.wang {
	border-collapse: collapse;
	border-spacing: 0;
}
table.wang th, table.wang td {
	padding: 0.2em;
	border-left: 1px solid #000000;
}
table.wang th.col1, table.wang td.col1 {
	border-left: 0;
}
table.wang th {
	font-weight: bold;
	background-color: #e5e5e5;
}

</style>
</head>

<body>
<p>合并起来的表格线条，谁更粗就听谁的</p>
<table class="tbl">
  <tfoot>
    <tr>
      <td>4</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>2</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
  </thead>
</table>
<hr />
<table class="chuan">
  <caption>
  “川”字形表格
  </caption>
  <tfoot>
    <tr>
      <td>51</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
      <td></td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
      <td></td>
    </tr>
    <tr>
      <td>41</td>
      <td>42</td>
      <td>43</td>
      <td>44</td>
      <td></td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>11</th>
      <th>21</th>
      <th>31</th>
      <th>41</th>
      <th>51</th>
    </tr>
  </thead>
</table>
<hr />
<table class="hui">
  <caption>
  “回”字形表格
  </caption>
  <tfoot>
    <tr>
      <td>51</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
      <td></td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
      <td></td>
    </tr>
    <tr>
      <td>41</td>
      <td>42</td>
      <td>43</td>
      <td>44</td>
      <td></td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>11</th>
      <th>21</th>
      <th>31</th>
      <th>41</th>
      <th>51</th>
    </tr>
  </thead>
</table>
<hr />
<table class="san">
  <caption>
  “三”字形表格
  </caption>
  <tfoot>
    <tr>
      <td>51</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
      <td></td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
      <td></td>
    </tr>
    <tr>
      <td>41</td>
      <td>42</td>
      <td>43</td>
      <td>44</td>
      <td></td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>11</th>
      <th>21</th>
      <th>31</th>
      <th>41</th>
      <th>51</th>
    </tr>
  </thead>
</table>
<hr />
<table class="tian">
  <caption>
  “田”字形表格
  </caption>
  <tfoot>
    <tr>
      <td>51</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
      <td></td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
      <td></td>
    </tr>
    <tr>
      <td>41</td>
      <td>42</td>
      <td>43</td>
      <td>44</td>
      <td></td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>11</th>
      <th>21</th>
      <th>31</th>
      <th>41</th>
      <th>51</th>
    </tr>
  </thead>
</table>
<hr />
<table class="wang">
  <caption>
  “王”字形表格
  </caption>
  <tfoot>
    <tr>
      <td class="col1">51</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td class="col1">21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
      <td></td>
    </tr>
    <tr>
      <td class="col1">31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
      <td></td>
    </tr>
    <tr>
      <td class="col1">41</td>
      <td>42</td>
      <td>43</td>
      <td>44</td>
      <td></td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th class="col1">11</th>
      <th>21</th>
      <th>31</th>
      <th>41</th>
      <th>51</th>
    </tr>
  </thead>
</table>
</body>
</html>
